<template>
	<div>
     <div :id="id" :class="className" :style="{ height:height,width:width }" />
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {

  props: {
    className: {
      type: String,
      default: "chart"
    },
    id: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "400px"
    },
    data: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      console.log(this.data)
      const option = {


        // tooltip: {
        //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
        // },
      
		    series: [{
		        name: '热点分析',
		        type: 'wordCloud',
		        //size: ['9%', '99%'],
		        sizeRange: [6, 66],
		        //textRotation: [0, 45, 90, -45],
		        rotationRange: [-45, 90],
		        //shape: 'circle',
		        textPadding: 0,
		        autoSize: {
		            enable: true,
		            minSize: 6
		        },
		        textStyle: {
		            normal: {
		                color: function() {
		                    return 'rgb(' + [
		                        Math.round(Math.random() * 160),
		                        Math.round(Math.random() * 160),
		                        Math.round(Math.random() * 160)
		                    ].join(',') + ')';
		                }
		            },
		            emphasis: {
		                shadowBlur: 10,
		                shadowColor: '#333'
		            }
		        },
		        data: [{
		            name: "Jayfee",
		            value: 666
		        }, {
		            name: "Nancy",
		            value: 520
		        }]
		    }]
		        
      };
      this.chart.setOption(option);
    }
  }
};
</script>
<style lang='scss' scoped>
.chartsClass {
  padding-left: 1.2rem;
}
</style>